@import "../../assets/iconfont/iconfont";
@import "../styles/mixins";
@import "../styles/input";

.instant-search {
	display: inline-block;
	position: relative;

	.instant-search-input {
		line-height: $control-height;
		vertical-align: top;
	}

	.instant-search-icon {
		@extend .iconfont;
		@extend .icon-search;
		position: absolute;
		top: 0;
		right: .5em;
		line-height: $control-height;
		color: #dbdbdb;
	}
	.search-hint {
		position: absolute;
		top: calc(100% + 1px);
		left: 0;
		z-index: 1;
		box-sizing: border-box;
		min-width: 100%;
		max-width: 150%;
		padding: 5px 0;
		margin: 0;
		list-style: none;
		border: 1px solid #d9d9d9;
		background-color: #fff;
		li {
			@include cut-long-text;
			padding: 5px 8px;
			font-size: 12px;
			cursor: pointer;
			.up-level {
				color: #777777;
			}
			&.focus, &:hover {
				background-color: #f6f6f6;
			}
			&.empty-list-item {
				cursor: default;
				&:hover {
					background-color: #fff;
				}
			}
		}
	}
}
